<template>
  <el-tooltip
    class="item"
    effect="light"
    placement="bottom"
    popper-class="tooltip-content"
  >
    <div slot="content" class="main">
      <div style="padding: 20px 15px 0 15px;">
        <div style="font-size:15px;font-weight: 500;">
          {{ event.ddlx }} {{ event.zl }}吨
        </div>
        <div>{{ event.pz }}</div>
        <el-descriptions class="order-des" :column="1">
          <el-descriptions-item label="车间/楼层">{{
            event.cj
          }}</el-descriptions-item>
          <el-descriptions-item label="支别">{{
            event.zb
          }}</el-descriptions-item>
          <el-descriptions-item label="计划开台">{{
            event.jhkt
          }}</el-descriptions-item>
          <el-descriptions-item label="计划停台"
            >{{ event.jhtt }}
          </el-descriptions-item>
          <el-descriptions-item label="要求日期">{{
            event.ddjq
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <el-row type="flex" class="tooltip-btn" align="middle">
        <el-col :span="12"> <div @click="addOrder">增加订单</div></el-col>
        <el-col :span="12"> <div @click="goDetail">查看详情</div></el-col>
      </el-row>
    </div>
    <div
      class="event-item"
      :class="cssClasses"
      @click="$emit('click', event, $event)"
    >
      <slot :event="event">
        <div class="first-title" :class="{ opacity: !showTitle }">
          {{ event.ddlx
          }}<span style="font-size:14px;font-weight:600;margin:0 4px 0 5px">{{
            event.zl
          }}</span
          >吨
        </div>
        <div class="second-title" :class="{ opacity: !showTitle }">
          {{ event.pz }}
        </div>
      </slot>
      <slot :event="event" v-if="showLast">
        <div class="cj">{{ event.cj }}</div>
      </slot>
    </div>
  </el-tooltip>
</template>

<script>
import moment from 'moment';

export default {
  props: ['event', 'date', 'firstDay', 'eventindex'],
  computed: {
    cssClasses() {
      let cssClasses = this.event.cssClass;
      if (!Array.isArray(cssClasses)) {
        cssClasses = [cssClasses];
      } else {
        cssClasses = Array.from(cssClasses);
      }

      if (this.start.isSame(this.date, 'day')) {
        cssClasses.push('is-start');
      }

      if (this.end.isSame(this.date, 'day')) {
        cssClasses.push('is-end');
      }

      if (!this.event.isShow) {
        cssClasses.push('is-opacity');
      }

      return cssClasses.join(' ');
    },
    showTitle() {
      //   return (
      //     this.date.day() == this.firstDay || this.start.isSame(this.date, 'day')
      //   );
      return this.start.isSame(this.date, 'day');
    },
    showLast() {
      return this.end.isSame(this.date, 'day');
    },
    start() {
      return moment(this.event.start);
    },
    end() {
      return moment(this.event.end);
    }
  },
  methods: {
    addOrder() {
      this.$EventBus.$emit('openAddOrderDialog', this.event);
    },
    goDetail() {
      this.$EventBus.$emit('openOrderDrawerDialog', this.event);
    }
  }
};
</script>
<style lang="scss">
.first-title {
  margin-bottom: 5px;
  &.opacity {
    opacity: 0;
  }
}
.cj {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 12px;
  font-weight: bold;
  color: #182236;
}
.second-title {
  &.opacity {
    opacity: 0;
  }
}
.el-tooltip__popper.is-light.tooltip-content {
  padding: 0;
  border: none;
  box-shadow: 0px 2px 10px 0px rgba(133, 136, 150, 0.25);
  .main {
    width: 220px;
    color: #182236;
    font-size: 14px;
    .order-des {
      margin: 10px 0;
      color: #48556a;
      font-size: 13px;
      .el-descriptions-item__cell {
        padding-bottom: 0;
      }
    }
    .tooltip-btn {
      background: #eef0f2;
      color: #182236;
      height: 34px;
      .el-col div {
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
.tooltip-content.el-tooltip__popper[x-placement^='bottom'] .popper__arrow {
  border-bottom-color: white !important;
}
.tooltip-content.el-tooltip__popper[x-placement^='bottom']
  .popper__arrow:after {
  border-bottom-color: white !important;
}
.tooltip-content.el-tooltip__popper[x-placement^='top'] .popper__arrow {
  border-top-color: #eef0f2 !important;
}
.tooltip-content.el-tooltip__popper[x-placement^='top'] .popper__arrow:after {
  border-top-color: #eef0f2 !important;
}
</style>
